<template>
    <view class="page">
        <view class="top_box">
            <back :title="'登录/注册'" :isBack="true" :isBg="false"></back>

        </view>
        <view class="phone_box">
            <view class="top_text_box">
                手机号
            </view>
            <view class="callsr_box">
                <input type="number" maxlength="11" placeholder="请输入手机号"
                    placeholder-style="color: rgba(159, 171, 171, 1)">
            </view>
        </view>
        <view class="phone_box">
            <view class="top_text_box">
                验证码
            </view>
            <view class="yzm_big_box">
                <view class="callsr_box">
                    <input type="number" maxlength="6" placeholder="请输入验证码"
                        placeholder-style="color: rgba(159, 171, 171, 1)">

                </view>

                <view v-if="countdown > 0" class="auth_box">{{ countdown }}
                </view>
                <view v-else class="auth_box" @click="startCountdown">
                    获取验证码
                </view>
            </view>
        </view>

        <!-- 登录 -->
        <view class="dlSub_box">
            立即登录
        </view>

    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            agrentSta: false,//是否同意协议
            countdown: 0, // 倒计时秒数
            timer: null, // 定时器
            totalSeconds: 3, // 总共的倒计时时间（单位：秒）
        }
    },
    onShow() {
    },
    methods: {
        // 协议
        agrentBtn() {
            this.agrentSta = !this.agrentSta
        },
        //验证码倒计时
        startCountdown() {
            this.countdown = this.totalSeconds;
            if (this.timer) {
                clearInterval(this.timer);
            }
            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(this.timer);
                }
            }, 1000);
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .top_box {
        width: 100%;
        height: 460rpx;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(226, 244, 243, 0) 100%);

        .hyy_box {
            width: 238rpx;
            margin-top: 50rpx;
            margin-left: 73rpx;

            image {
                width: 100%;
            }
        }

        .Welcome_box {
            width: 336rpx;
            height: 58rpx;
            font-size: 48rpx;
            font-weight: 400;
            line-height: 58rpx;
            color: rgba(0, 0, 0, 1);
            margin-left: 73rpx;

        }
    }

    .phone_box {
        width: 622rpx;
        height: 130rpx;
        margin: auto;
        border-bottom: 3rpx solid rgba(237, 240, 240, 1);
        margin-bottom: 30rpx;

        .top_text_box {
            font-size: 32rpx;
            font-weight: 600;
            color: rgba(30, 33, 33, 1);
            margin-bottom: 24rpx;
        }

        .yzm_big_box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .callsr_box {
                width: 400rpx;
                height: 70rpx;

                input {}


            }

            .auth_box {
                height: 36rpx;
                font-size: 26rpx;
                font-weight: 400;
                line-height: 36rpx;
                color: rgba(26, 194, 121, 1);
            }
        }

    }

    .dlSub_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: 60rpx auto;
        font-size: 36rpx;
        font-weight: 400;
        line-height: 100rpx;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

}
</style>